<template>
  <div id="login-container">
    <div class="login-left">
      <div>
        <img src="../../assets/logo.png" alt="" />
        <p>药典目录管理</p>
      </div>
    </div>
    <div class="login-right">
      <div class="login-main">
        <h4 class="login-title">请登录您的账号</h4>
        <form class="login-form" @submit.prevent="onSubmit">
          <dx-form :form-data="formData" :disabled="loading">
            <dx-item data-field="phone"
                      editor-type="dxTextBox"
                      :editor-options="{
                      stylingMode: 'outlined',
                      placeholder: '请输入手机号码',
                      mode: 'phone',
              }">
              <dx-required-rule message="请输入手机号码" />
              <dx-pattern-rule :pattern="phonePattern"
                               message="请输入有效的11位手机号码" />
              <dx-label :visible="false" />
            </dx-item>
            <dx-item data-field="authcode"
                      editor-type="dxTextBox"
                      :editor-options="{
                      stylingMode: 'outlined',
                      placeholder: '请输入验证码',
                      mode: 'authcode',
                    }">
              <dx-required-rule message="请输入验证码" />
              <dx-label :visible="false" />
            </dx-item>
            <dx-button-item>
              <dx-button-options :element-attr="{ class: 'submit-button' }"
                                 width="100%"
                                 type="default"
                                 :use-submit-behavior="true"> 登录
              </dx-button-options>
            </dx-button-item>

            <dx-item data-field="login-type" template="login">
              <dx-label :visible="false" />
            </dx-item>
            <!-- <dx-item>
              <template #default>
                <div class="login-link">
                  Return to <router-link to="/login-form">Sign In</router-link>
                </div>
              </template>
            </dx-item> -->
            <!-- <template #resetTemplate>
              <div>
                <span class="dx-button-text">
                    <dx-load-indicator v-if="loading" width="24px" height="24px" :visible="true" />
                    <span v-if="!loading">Reset my password</span>
                </span>
              </div>
            </template> -->
            
            <template #login>
              <div class="login-type">
                <DxButton
                  text="账号密码登录"
                  stylingMode="text"
                  type="default"
                  @click="goAccount()"
                />
                <DxButton
                  text="手机号登录"
                  stylingMode="text"
                  type="default"
                  :disabled="true"
                  
                />
              </div>
            </template>
          </dx-form>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import DxForm, {
    DxItem,
    DxLabel,
    DxButtonItem,
    DxButtonOptions,
    DxRequiredRule,
    DxPatternRule,
  } from "devextreme-vue/form";
  import DxLoadIndicator from "devextreme-vue/load-indicator";
  import { Options, Vue } from "vue-class-component";
  import { DxButton } from "devextreme-vue/button";
  import { SearchByURL } from "@/utils/search-byurl";

  @Options({
    components: {
      DxForm,
      DxItem,
      DxLabel,
      DxButtonItem,
      DxButtonOptions,
      DxRequiredRule,
      DxLoadIndicator,
      DxPatternRule,
      DxButton
    }
  })
  export default class Phone extends Vue {
    searchByURL:SearchByURL;
    loading = false;
    phonePattern = /^[1][3,4,5,7,8][0-9]{9}$/;
    formData = {
      phone: '',
      authcode: ''
    };
    created() {
      this.searchByURL = new SearchByURL(this.$router, 1);
    }
    goAccount(){
      this.searchByURL.setParamsToUrl({type: 'account'});
    }
    onSubmit() {
      //const { phone,authcode } = formData;
      //loading.value = true;

      //const result = await auth.logIn(phone, authcode);
      //if (!result.isOk) {
      //  loading.value = false;
      //  notify(result.message, "error", 2000);
      //} else {
      //  router.push(route.query.redirect || "/account/client");
      //}
    }
  }
</script>

<style lang="scss" src="./account.scss" scoped>
</style>
